import React, { Component } from 'react';
import { HashRouter, Route, Link, Switch } from 'react-router-dom'

import ReactMarkdown from 'react-markdown'
import CodeBlock from './markedow/CodeBlock'
import Arr from './page_config'

class App extends Component {
  state = {
    md: ''
  }
  componentDidMount() {
    this.fn(0)
  }



  fn = (i) => {
    let modules;
    try {
      const p = Arr[i].readmepath

      modules = require(`./component${p}`)

    } catch (err) {
      console.log(err)
      alert('路径出错了')
    }
    if (modules) {
      fetch(modules.default).then(r => {
        r.text().then(res => {
          this.setState({
            md: res
          })
        })
      })
    }

  }
  render() {
    const { md } = this.state
    return (
      <div style={{ display: 'flex', width: "100%", height: "100%" }}>
        <HashRouter>
          <div className="left" style={{ width: "160px", background: '#fff' }}>
            {Arr.map((v, i) => {
              return <div key={v.text} style={{ textAlign: 'left', padding: "5px 10px" }} onClick={() => {
                this.fn(i)
              }}>
                <Link to={v.path}>{v.text}</Link>
              </div>

            })}
          </div>
          <div className="right" style={{ display: 'flex', flex: '1' }}>
            <Switch>
              {Arr.map(v => {
                return <Route exact={v.exact} key={v.text} path={v.path} render={() => {
                  return <div style={{ display: 'flex', flex: '1' }}>
                    <div ref={el => {
                      this.moveelleft = el
                    }}
                      style={{ display: 'flex', flex: '1', background: "#fff", padding: '5px' }}>
                      {v.el.map((com, index) => {
                        return <div key={index} style={{ width: '100%', border: '1px solid #ecc',height:'100%',overflow:'auto' }}>

                          <div className="main_component">

                            <com.com></com.com>
                          </div>
                          <br />

                          <hr />
                          <br />
                          <div style={{width:"100%"}}>
                            {com.discription ? <com.discription></com.discription> : ""}

                          </div>
                        </div>
                      })}
                    </div>
                    <div ref={el => {
                      this.moveel = el
                    }} className='weeeee'>

                    </div>
                    <div style={{ width: "550px", padding: "10px" }}
                      ref={el => {
                        this.moveelright = el
                      }} className='hiliiisisi'>
                      <ReactMarkdown
                        source={md}
                        escapeHtml={false}
                        renderers={{
                          code: CodeBlock

                        }}
                      />
                    </div>
                  </div>
                }}></Route>

              })}

            </Switch>
          </div>
        </HashRouter>


      </div>
    );
  }
}

export default App;
